* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* GLOBAL SPACING */
body {
  font-family: 'Poppins', sans-serif;
  background: #111;
  color: white;
  line-height: 1.6;
  padding-top: 100px; /* prevents header overlap */
}

section {
  padding: 20px 15px;
}

/* =====================
   TYPOGRAPHY
===================== */
h1, h2, h3, h4 {
  font-weight: 600;
  margin-bottom: 10px;
}

p {
  font-weight: 300;
  margin-bottom: 10px;
}

.fancy-text {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 3px;
  text-shadow: 2px 2px 8px rgb(238, 66, 66)
}

@media (min-width: 600px) {
  .fancy-text {
    font-size: 36px;
  }
}

@media (min-width: 992px) {
  .fancy-text {
    font-size: 48px;
  }
}

/* =====================
   IMAGES
===================== */
img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* =====================
   NAVBAR (FIXED & MOBILE FRIENDLY)
===================== */
/* HEADER BASE */
.main-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0,0,0,0.9);
  padding: 10px 20px;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* SECTIONS */
.header-left h1 {
  font-size: 16px;
}

.header-center p {
  font-size: 12px;
  opacity: 0.8;
}

.header-right nav a {
  color: white;
  text-decoration: none;
  margin: 5px;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.25s ease;
}

.header-right nav a:hover {
  background: #00bcd4;
  color: black;
  border-color: #00bcd4;
  box-shadow:
    0 0 8px #00bcd4,
    0 0 20px #00bcd4,
    0 0 40px #00bcd4;
}

.header-center a {
  color: white;
  text-decoration: none;
}

.header-center a:hover {
  color: #00bcd4;
}

/* DESKTOP LAYOUT */
@media (min-width: 768px) {
  .main-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .header-left {
    flex: 1;
  }

  .header-center {
    flex: 1;
    text-align: center;
  }

  .header-right {
    flex: 1;
    text-align: right;
  }
}

body{

  padding-top: 80px;
}

.header-spacer {
  height: 70px;
}
/* =====================
   HERO
===================== */
.hero {
  position: relative;
  height: 60vh;
  overflow: hidden;
  margin-bottom: 20px;
}

.hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.hero-text {
  width: 100%;
  padding: 0 20px;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hero-text h2 {
  font-size: 1.5rem;
  color: #5ea7a0;
}

.highlight {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  padding: 0.2em 0.5em;
  border-radius: 6px;
}

/* =====================
   GRID (SERVICES)
===================== */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  padding: 15px;
  margin: 0;
}

.card {
  background: #222;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card h3 {
  padding: 10px;
  font-size: 14px;
  background: #333;
  text-align: center;
}

.card-list {
  list-style: none;
  padding: 10px;
  margin: 0 auto;
  max-width: 250px;
  text-align: center;
}

.card-list li {
  margin: 6px 0;
  font-size: 14px;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 0 8px rgb(233, 253, 56),
    0 0 20px rgb(223, 218, 218),
    0 0 35px rgba(207, 132, 132, 0.3);
}

/* =====================
   INFO SECTION
===================== */
/* INFO SECTION */
.info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* AUDI IMAGE FIX */
.info img:first-child {
  width: 70%;
  max-width: 500px;   /* prevents it from getting huge */
  height: auto;
  border-radius: 10px;
}

.text-block {
  display: flex;
  flex-direction: column;
  align-items: center;   /* keeps everything centered */
  text-align: center;    /* centers text */
  gap: 15px;

  width: 100%;
  max-width: 700px;
  padding: 10px;

}@media (min-width: 600px) {
  .info {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }

  .info img:first-child {
    max-width: 450px;
  }

  .text-block {
    align-items: center;   /* keep centered (this was your issue) */
    text-align: center;    /* keep text centered */
  }
}



/* CASHAPP FIX */
.cashapp-logo {
  width: 330px;   /* controlled size */
  height: auto;
  margin-top: 10px;
}

/* TABLET + DESKTOP */
@media (min-width: 600px) {
  .info {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .text-block {
    align-items: flex-start;
    text-align: left;
  }
}
/* =====================
   SOCIAL SECTION
===================== */
.social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 10px;
  margin-top: 40px;
  background: #111;
  flex-direction: column;
}

.social div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.social img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

.social-btn {
  padding: 6px 10px;
  font-size: 12px;
  background: black;
  color: white;
  border: 2px solid #00bcd4;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.social-btn:hover {
  transform: scale(1.08);
  background: #00bcd4;
  color: black;
  box-shadow:
    0 0 8px #00bcd4,
    0 0 20px #00bcd4,
    0 0 40px #00bcd4;
}

/* =====================
   FOOTER
===================== */
footer {
  text-align: center;
  padding: 20px;
}

/* =====================
   TABLET
===================== */
@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-text h2 {
    font-size: 2.2rem;
  }

  .info {
    flex-direction: row;
  }

  .text-block {
    flex-direction: row;
    text-align: left;
  }

  .social {
    flex-direction: row;
  }
}

/* =====================
   DESKTOP
===================== */
@media (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero-text h2 {
    font-size: 3rem;
  }

  header h1 {
    font-size: 18px;
  }
}

/* Colors */
.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}
.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
.w3-cobalt,.w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
.w3-emerald,.w3-hover-emerald:hover{color:#fff!important;background-color:#008a00!important}
.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}
.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
.w3-danger{color:#fff!important;background-color:#dd0000!important}
.w3-note{color:#000!important;background-color:#fff599!important}
.w3-info{color:#fff!important;background-color:#0a6fc2!important}
.w3-warning{color:#000!important;background-color:#ffb305!important}
.w3-success{color:#fff!important;background-color:#008a00!important}
.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}